<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        产品设备
        <small>控制面板</small>
    </h1>
</section>

<!-- Main content -->
<section class="content container-fluid">
    <!-- Small boxes (Stat box) -->
    <div class="row">
        <div class="col-lg-3 col-xs-6">
            <!-- small box -->
            <div class="small-box bg-aqua-gradient">
                <div class="inner">
                    <h3 id="dtuCount">0</h3>
                    <p>网络设备</p>
                </div>
                <div class="icon">
                    <i class="ion ion-android-laptop"></i>
                </div>
                <a href="../equipmentdtuconfig/index" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <!-- ./col -->

        <div class="col-lg-3 col-xs-6">
            <!-- small box -->
            <div class="small-box bg-green">
                <div class="inner">
                    <h3 id="meterCount">0</h3>
                    <p>终端设备</p>
                </div>
                <div class="icon">
                    <i class="ion ion-stats-bars"></i>
                </div>
                <a href="../equipmentmeterconfig/index" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <!-- ./col -->

        <div class="col-lg-3 col-xs-6">
            <!-- small box -->
            <div class="small-box bg-purple">
                <div class="inner">
                    <h3 id="rowsToday">0</h3>
                    <p>今日采集</p>
                </div>
                <div class="icon">
                    <i class="ion ion-pie-graph"></i>
                </div>
                <a href="../collectbaseinfo/index" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <!-- ./col -->

        <div class="col-lg-3 col-xs-6">
            <!-- small box -->
            <div class="small-box bg-blue-active">
                <div class="inner">
                    <h3 id="customers">0</h3>
                    <p>客户</p>
                </div>
                <div class="icon">
                    <i class="ion ion-ios-people"></i>
                </div>
                <a href="../equipmentcustomer/index" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <!-- ./col -->
    </div>

    <!-- Main row -->
    <div class="row">
        <section class="col-lg-12 connectedSortable">
            <!-- 采集总量 -->
            <div class="box box-default">
                <div class="box-header with-border">
                    <i class="fa  fa-pie-chart"></i>
                    <h3 class="box-title">设备比例<small> 硬件设备的比例，设备类型采集合格比例</small></h3>

                    <div class="box-tools pull-right">
                        <div class="btn-group">
                            <button type="button" class="btn btn-box-tool btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i></button>
                            <ul class="dropdown-menu" role="menu" id="dateSelect">
                                <li><a href="#">前一天</a></li>
                                <li><a href="#">后一天</a></li>
                                <li class="divider"></li>
                                <li><a href="#">今天</a></li>
                            </ul>
                        </div>
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="chart-responsive">
                                <div id="overviewTodayChart" style="height: 400px;"></div>
                            </div>
                            <!-- ./chart-responsive -->
                            <div class="box-footer no-padding" id="overviewTodayProcess">

                            </div>
                        </div>

                        <!-- /.col -->
                        <div class="col-md-4">
                            <div class="info-box bg-yellow">
                                <span class="info-box-icon"><i class="ion ion-ios-pricetag-outline"></i></span>

                                <div class="info-box-content" id="PMAC720">

                                </div>
                                <!-- /.info-box-content -->
                            </div>

                            <div class="info-box bg-green">
                                <span class="info-box-icon"><i class="ion ion-ios-heart-outline"></i></span>

                                <div class="info-box-content" id="YD2045C_W">

                                </div>
                                <!-- /.info-box-content -->
                            </div>

                            <div class="info-box bg-red">
                                <span class="info-box-icon"><i class="ion ion-ios-cloud-download-outline"></i></span>

                                <div class="info-box-content" id="LU_312">

                                </div>
                                <!-- /.info-box-content -->
                            </div>

                            <div class="info-box bg-aqua">
                                <span class="info-box-icon"><i class="ion ion-ios-chatbubble-outline"></i></span>

                                <div class="info-box-content" id="PD866E">

                                </div>
                                <!-- /.info-box-content -->
                            </div>

                            <div class="info-box bg-light-blue">
                                <span class="info-box-icon"><i class="ion ion-flame"></i></span>

                                <div class="info-box-content" id="PMAC600B_Z_SC">

                                </div>
                                <!-- /.info-box-content -->
                            </div>

                            <div class="info-box bg-teal">
                                <span class="info-box-icon"><i class="ion ion-flag"></i></span>

                                <div class="info-box-content" id="PMC-D726M">

                                </div>
                                <!-- /.info-box-content -->
                            </div>

                            <div class="info-box bg-purple">
                                <span class="info-box-icon"><i class="ion ion-icecream"></i></span>

                                <div class="info-box-content" id="RJ-OP485">

                                </div>
                                <!-- /.info-box-content -->
                            </div>
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </section>

        <section class="col-lg-8 connectedSortable">
            <!-- today collect -->
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs pull-right">
                    <li class=""><a href="#tab_1-1" data-toggle="tab" aria-expanded="false">离线</a></li>
                    <li class="active"><a href="#tab_2-2" data-toggle="tab" aria-expanded="true">在线</a></li>
                    <li class="pull-left header">
                        <i class="fa fa-bar-chart-o"></i>
                        今日设备
                        <small>
                            <span id="dtuState"></span>
                        </small>
                    </li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane" id="tab_1-1">
                        <div class="box-body table-responsive no-padding">
                            <table id="offlineTable" class="table table-hover table-striped">
                                <thead>
                                <tr>
                                    <th style="width: 80px">序号</th>
                                    <th>DTU编号</th>
                                    <th>电表地址</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!-- /.tab-pane -->
                    <div class="tab-pane active" id="tab_2-2">
                        <div id="dtuRowToday">
                        </div>
                    </div>
                    <!-- /.tab-pane -->
                </div>
                <!-- /.tab-content -->

            </div>
            <!-- /.box -->

            <!-- tree -->
            <div class="box box-success">
                <div class="box-header with-border">
                    <i class="fa fa-sitemap"></i>
                    <h3 class="box-title">安装信息
                        <small>客户所有的电表信息</small>
                    </h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                        <button type="button" class="btn btn-box-tool tree-expand" data-widget="maximize"><i class="fa fa-expand"></i></button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                    </div>
                </div>
                <div class="box-body">
                    <div id="tree-container">

                    </div>
                </div>
            </div>
            <!-- /.box -->

            <!-- 地图 -->
            <div class="box box-warning">
                <div class="box-header with-border">
                    <i class="fa fa-map-marker"></i>
                    <h3 class="box-title">客户分布
                        <small>市区客户分布</small>
                    </h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                        <button type="button" class="btn btn-box-tool custom-expand" data-widget="maximize"><i class="fa fa-expand"></i></button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="row">
                        <div id="customerZone" class="col-md-2 col-sm-4" >

                        </div>
                        <!-- /.col -->
                        <div class="col-md-10 col-sm-8">
                            <div id="world-map-gdp" style="height: 360px; width: 100%">

                            </div>
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </section>

        <section class="col-lg-4 connectedSortable">
            <!-- 月采集统计 -->
            <div class="box box-solid bg-aqua-gradient">
                <div class="box-header">
                    <i class="fa fa-line-chart"></i>
                    <h3 class="box-title">月采集统计
                        <small>30日采集趋势</small>
                    </h3>

                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-info btn-sm" data-widget="collapse"><i class="fa fa-minus"></i></button>
                        <button type="button" class="btn btn-info btn-sm" data-widget="remove"><i class="fa fa-times"></i></button>
                    </div>
                </div>

                <div class="box-body border-radius-none">
                    <div id="collectCountOfMonth" class="chart" style="height: 250px;"></div>
                </div>
            </div>
            <!-- /.box -->



            <!-- Calendar -->
            <div class="box box-solid bg-green-gradient">
                <div class="box-header">
                    <i class="fa fa-calendar"></i>
                    <h3 class="box-title">日期</h3>
                    <!-- tools box -->
                    <div class="box-tools pull-right">
                        <!-- button with a dropdown -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i></button>
                            <ul class="dropdown-menu pull-right" role="menu">
                                <li><a href="#">添加新事件</a></li>
                                <li><a href="#">清除事件</a></li>
                                <li class="divider"></li>
                                <li><a href="#">View calendar</a></li>
                            </ul>
                        </div>
                        <button type="button" class="btn btn-success btn-sm" data-widget="collapse"><i class="fa fa-minus"></i></button>
                        <button type="button" class="btn btn-success btn-sm" data-widget="remove"><i class="fa fa-times"></i></button>
                    </div>
                    <!-- /. tools -->
                </div>
                <!-- /.box-header -->
                <div class="box-body no-padding">
                    <!--The calendar -->
                    <div id="calendar" style="width: 100%"></div>
                </div>
                <!-- /.box-body -->
                <div class="box-footer text-black">
                    <div class="row">
                        <div class="col-sm-6">
                            <!-- Progress bars -->
                            <div class="clearfix">
                                <span class="pull-left">本月计划</span>
                                <small class="pull-right">90%</small>
                            </div>
                            <div class="progress xs">
                                <div class="progress-bar progress-bar-green" style="width: 90%;"></div>
                            </div>

                            <div class="clearfix">
                                <span class="pull-left">本月完成</span>
                                <small class="pull-right">70%</small>
                            </div>
                            <div class="progress xs">
                                <div class="progress-bar progress-bar-green" style="width: 70%;"></div>
                            </div>
                        </div>
                        <!-- /.col -->
                        <div class="col-sm-6">
                            <div class="clearfix">
                                <span class="pull-left">下月计划</span>
                                <small class="pull-right">60%</small>
                            </div>
                            <div class="progress xs">
                                <div class="progress-bar progress-bar-green" style="width: 60%;"></div>
                            </div>

                            <div class="clearfix">
                                <span class="pull-left">下月目标</span>
                                <small class="pull-right">40%</small>
                            </div>
                            <div class="progress xs">
                                <div class="progress-bar progress-bar-green" style="width: 40%;"></div>
                            </div>
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                </div>
            </div>
            <!-- /.box -->

            <!-- weather -->
            <div class="box box-solid bg-teal-gradient">
                <div class="box-header">
                    <i class="fa fa-cloud"></i>
                    <h3 class="box-title">天气情况</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn bg-teal btn-sm" data-widget="collapse"><i class="fa fa-minus"></i></button>
                        <button type="button" class="btn bg-teal btn-sm" data-widget="remove"><i class="fa fa-times"></i></button>
                    </div>
                </div>

                <div id="weather" class="box-body border-radius-none">
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="weather-icon">
                                  <span>
                                      <canvas id="partly-cloudy-day" height="84" width="84"></canvas>
                                  </span>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="weather-text">
                                <h2>广州
                                    <br><i> 晴天</i>
                                </h2>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="weather-text pull-left">
                                <h2 id="degress" class="degrees">0</h2>
                            </div>
                        </div>

                        <div class="clearfix"></div>

                        <div class="row weather-days">
                            <div class="col-sm-2">
                                <div class="daily-weather">
                                    <h2 class="day">周一</h2>
                                    <h3 class="degrees">25</h3>
                                    <canvas id="clear-day" width="32" height="32"></canvas>
                                    <h5>15 <i>km/h</i></h5>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="daily-weather">
                                    <h2 class="day">周二</h2>
                                    <h3 class="degrees">25</h3>
                                    <canvas id="rain" height="32" width="32"></canvas>
                                    <h5>12 <i>km/h</i></h5>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="daily-weather">
                                    <h2 class="day">周三</h2>
                                    <h3 class="degrees">27</h3>
                                    <canvas id="snow" height="32" width="32"></canvas>
                                    <h5>14 <i>km/h</i></h5>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="daily-weather">
                                    <h2 class="day">周四</h2>
                                    <h3 class="degrees">28</h3>
                                    <canvas id="sleet" height="32" width="32"></canvas>
                                    <h5>15 <i>km/h</i></h5>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="daily-weather">
                                    <h2 class="day">周五</h2>
                                    <h3 class="degrees">28</h3>
                                    <canvas id="wind" height="32" width="32"></canvas>
                                    <h5>11 <i>km/h</i></h5>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="daily-weather">
                                    <h2 class="day">周六</h2>
                                    <h3 class="degrees">26</h3>
                                    <canvas id="cloudy" height="32" width="32"></canvas>
                                    <h5>10 <i>km/h</i></h5>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <!-- /.row -->
                    </div>
                </div>
                <!-- /.box-footer -->
            </div>
            <!-- /.box -->
        </section>
    </div>
</section>
<!-- /.Main content -->




